<template>
  <div class="dict-container">
    <!-- 左侧字典分类树 -->
    <div class="dict-tree">
      <div class="tree-header">
        <el-button type="primary" @click="handleAddCategory">添加分类</el-button>
      </div>
      <el-tree
        :data="categoryTree"
        node-key="id"
        :props="treeProps"
        @node-click="handleNodeClick"
        :expand-on-click-node="false"
      >
        <template #default="{ node, data }">
          <span class="custom-tree-node">
            <span>{{ node.label }}</span>
            <span>
              <el-button link type="primary" @click.stop="handleEditCategory(data)">
                编辑
              </el-button>
              <el-button link type="danger" @click.stop="handleDeleteCategory(data)">
                删除
              </el-button>
            </span>
          </span>
        </template>
      </el-tree>
    </div>

    <!-- 右侧字典项列表 -->
    <div class="dict-items">
      <div class="items-header">
        <el-button type="primary" @click="handleAddItem">添加字典项</el-button>
      </div>
      <el-table :data="itemList" border style="width: 100%">
        <el-table-column prop="label" label="标签" width="180" />
        <el-table-column prop="value" label="值" width="180" />
        <el-table-column prop="sort" label="排序" width="80" />
        <el-table-column label="操作">
          <template #default="{ row }">
            <el-button size="small" @click="handleEditItem(row)">编辑</el-button>
            <el-button size="small" type="danger" @click="handleDeleteItem(row)"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </div>

    <!-- 分类编辑对话框 -->
    <el-dialog v-model="categoryDialogVisible" :title="categoryDialogTitle">
      <el-form :model="currentCategory" :rules="categoryRules" ref="categoryForm">
        <el-form-item label="分类名称" prop="name">
          <el-input v-model="currentCategory.name" />
        </el-form-item>
        <el-form-item label="排序" prop="sort">
          <el-input-number v-model="currentCategory.sort" :min="0" />
        </el-form-item>
      </el-form>
      <template #footer>
        <el-button @click="categoryDialogVisible = false">取消</el-button>
        <el-button type="primary" @click="submitCategory">确认</el-button>
      </template>
    </el-dialog>

    <!-- 字典项编辑对话框 -->
    <el-dialog v-model="itemDialogVisible" :title="itemDialogTitle">
      <el-form :model="currentItem" :rules="itemRules" ref="itemForm">
        <el-form-item label="标签" prop="label">
          <el-input v-model="currentItem.label" />
        </el-form-item>
        <el-form-item label="值" prop="value">
          <el-input v-model="currentItem.value" />
        </el-form-item>
        <el-form-item label="排序" prop="sort">
          <el-input-number v-model="currentItem.sort" :min="0" />
        </el-form-item>
      </el-form>
      <template #footer>
        <el-button @click="itemDialogVisible = false">取消</el-button>
        <el-button type="primary" @click="submitItem">确认</el-button>
      </template>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted } from 'vue'
import type { FormInstance, FormRules } from 'element-plus'

interface DictCategory {
  id?: number
  name: string
  parentId?: number
  sort: number
  children?: DictCategory[]
}

interface DictItem {
  id?: number
  label: string
  value: string
  sort: number
  categoryId?: number
}

// 分类树数据
const categoryTree = ref<DictCategory[]>([])
// 当前选中分类
const selectedCategory = ref<DictCategory>()
// 字典项列表
const itemList = ref<DictItem[]>([])

// 分类对话框相关
const categoryDialogVisible = ref(false)
const categoryDialogTitle = ref('')
const currentCategory = reactive<DictCategory>({
  name: '',
  sort: 0
})
const categoryForm = ref<FormInstance>()
const categoryRules: FormRules = {
  name: [{ required: true, message: '请输入分类名称', trigger: 'blur' }]
}

// 字典项对话框相关
const itemDialogVisible = ref(false)
const itemDialogTitle = ref('')
const currentItem = reactive<DictItem>({
  label: '',
  value: '',
  sort: 0
})
const itemForm = ref<FormInstance>()
const itemRules: FormRules = {
  label: [{ required: true, message: '请输入标签', trigger: 'blur' }],
  value: [{ required: true, message: '请输入值', trigger: 'blur' }]
}

// 树配置
const treeProps = {
  label: 'name',
  children: 'children'
}

// 初始化数据
onMounted(() => {
  loadCategoryTree()
})

// 加载分类树
const loadCategoryTree = async () => {
  // 这里调用API获取数据
  // 模拟数据
  categoryTree.value = [
    {
      id: 1,
      name: '系统设置',
      sort: 1,
      children: [
        { id: 2, name: '菜单类型', sort: 1 },
        { id: 3, name: '角色类型', sort: 2 }
      ]
    }
  ]
}

// 分类节点点击
const handleNodeClick = (data: DictCategory) => {
  selectedCategory.value = data
  loadItems(data.id!)
}

// 加载字典项
const loadItems = async (categoryId: number) => {
  // 调用API获取数据
  // 模拟数据
  itemList.value = [
    { id: 1, label: '菜单', value: 'menu', sort: 1, categoryId: 2 },
    { id: 2, label: '按钮', value: 'button', sort: 2, categoryId: 2 }
  ]
}

// 分类操作
const handleAddCategory = () => {
  categoryDialogTitle.value = '添加分类'
  currentCategory.name = ''
  currentCategory.sort = 0
  categoryDialogVisible.value = true
}

const handleEditCategory = (data: DictCategory) => {
  categoryDialogTitle.value = '编辑分类'
  Object.assign(currentCategory, data)
  categoryDialogVisible.value = true
}

const submitCategory = async () => {
  // 调用API保存分类
  categoryDialogVisible.value = false
  loadCategoryTree()
}

const handleDeleteCategory = async (data: DictCategory) => {
  // 调用API删除分类
  loadCategoryTree()
}

// 字典项操作
const handleAddItem = () => {
  if (!selectedCategory.value) {
    ElMessage.warning('请先选择分类')
    return
  }
  itemDialogTitle.value = '添加字典项'
  currentItem.label = ''
  currentItem.value = ''
  currentItem.sort = 0
  itemDialogVisible.value = true
}

const handleEditItem = (data: DictItem) => {
  itemDialogTitle.value = '编辑字典项'
  Object.assign(currentItem, data)
  itemDialogVisible.value = true
}

const submitItem = async () => {
  // 调用API保存字典项
  itemDialogVisible.value = false
  loadItems(selectedCategory.value!.id!)
}

const handleDeleteItem = async (data: DictItem) => {
  // 调用API删除字典项
  loadItems(selectedCategory.value!.id!)
}
</script>

<style scoped>
.dict-container {
  display: flex;
  height: 100%;
}

.dict-tree {
  width: 300px;
  border-right: 1px solid #eee;
  padding: 20px;
}

.dict-items {
  flex: 1;
  padding: 20px;
}

.tree-header,
.items-header {
  margin-bottom: 15px;
}

.custom-tree-node {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 14px;
  padding-right: 8px;
}
</style>